<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>
</head>
<body>
<h3>观察者模式</h3>
<script>
var observer = { //订阅者
    addSubstriber: function (callback){ // 增加子列
        this.subscribers[this.subscribers.length] = callback;
    },
    removeSubstriber: function (callback){ // 删除子列
        for(var i = 0;i<this.subscribers.length;i++){
            if(this.subscribers[i] === callback){
                delete(this.subscribers[i])
            }
        }
    },
    publish:function(what){ // 发布消息
        for(var i=0;i<this.subscribers.length; i++){
            if(typeof this.subscribers[i] === "function"){
                this.subscribers[i](what)
            }
        }
    },
    make:function(o){ // 制作 将对象转换为发布者
        for(var i in this){
            o[i] = this[i];
            o.subscribers = [];
        }
    }
}
// 2.0 增加订阅者  每当新博客准备好时，就会调用publish()方法
var blogger = {
    writeBlogPost:function(){
        var time = new Date();
        var content = '写博客---'+ time.getFullYear() + '年'+(time.getMonth()+1) +'月'+time.getDate();
        this.publish(content)
    }
}
// 3.0 另外一个订阅者，每当新一期的报刊出来时，就会调用publish()
var paper = {
    newspaper: function () {
        var paper = "看报纸---";
        this.publish(paper);
    }
}
// 4.0 把它们转变为发布者
observer.make(blogger);
observer.make(paper);
console.log(blogger)
console.log(paper)
// 5.0 两个简单对象 jack reggie
var  jack = {
    read:function(what){
        console.log('jack 在读'+what)
    }
}
var reggie = {
    run:function(what){
       console.log('reggie 做运动'+what)
    }
}
// 6.0 它们订阅blogger对象，只需要提供事件发生的回调函数
blogger.addSubstriber(jack.read)
blogger.addSubstriber(reggie.run)
console.log(blogger)
// 7.0 当 blogger 写了新的博客时会发生什么事呢？
// 结果就是jack和reggie会收到通知
blogger.writeBlogPost();
// jack 在读写博客---2020年2月27 reggie 做运动写博客---2020年2月27
console.log(observer)
// 8.0 jack可以取消订阅

blogger.removeSubstriber(jack.read)

blogger.writeBlogPost();// reggie 做运动写博客---2020年2月27


// 9.0 jack又可以订阅了
paper.addSubstriber(jack.read); // reggie 做运动写博客---2020年2月27
paper.newspaper() // jack 在读看报纸---
</script>
</body>
</html>
